<template>
  <div>
    <el-card>
      <el-tabs v-model="activeName" type="border-card" @tab-click="handerChangeTab">
        <el-tab-pane label="最好成绩">
          <el-card class="status-1">
            <el-form :model="form" ref="queryForm" :inline="true">
              <el-row class="basic">
                <el-col :span="8">
                  <span class="traing"></span>水上专项最好成绩展示
                  <span class="traing"></span>
                </el-col>
                <el-col :span="16">
                  <el-form-item label=" " prop="boatType">
                    <el-select
                      @change="gatetime"
                      v-model="form.trainingProject"
                      placeholder="选择专项"
                      clearable
                      size="small"
                      style="width: 160px"
                    >
                      <el-option label="水上专项训练" value="special_training_water"></el-option>
                      <el-option label="陆上专项训练(测功仪)" value="land_specific_training_dynamometer"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label=" " prop="type">
                    <el-select
                      @change="gatetime"
                      v-model="form.typeBoatSupport"
                      v-if="form.trainingProject == 'special_training_water'"
                      placeholder="选择艇支"
                      clearable
                      size="small"
                      style="width: 160px"
                    >
                      <el-option
                        v-for="dict in statusIlls"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                    </el-select>
                  </el-form-item>
                  <el-select v-model="form.kilometers" @change="gatetime" placeholder="选择公里数">
                    <el-option label="2000" value="2000"></el-option>
                  </el-select>
                  <el-form-item label=" " prop="screening_scope ">
                    <el-select
                      @change="gatetime"
                      v-model="form.screening_scope "
                      placeholder="设置筛选范围"
                      clearable
                      size="small"
                      style="width: 160px"
                    >
                      <el-option
                        v-for="dict in statusOptions1"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                    </el-select>
                  </el-form-item>
                  <el-date-picker
                    v-model="value1"
                    @change="gatetime"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                  ></el-date-picker>
                </el-col>
              </el-row>
            </el-form>
            <div id="water-speciale-chart" style="height: 300px;margin-left:58px;"></div>
          </el-card>
          <el-card class="stauts">
            <div class="breadcard">
              <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-row class="basic">
                  <el-col :span="12">
                    <span class="traing"></span>最佳拍档(成绩维度)
                    <span class="traing"></span>
                  </el-col>
                  <el-col :span="12">                   
                    <el-form-item label=" " prop="type">
                      <el-select
                        @change="selecTime"
                        v-model="formlist.typeBoatSupport"
                        placeholder="选择艇支"
                        clearable
                        size="small"
                        style="width: 160px"
                      >
                        <el-option
                          v-for="dict in statusIlls"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                    </el-form-item>
                    <el-select
                      v-model="formlist.kilometers"
                      placeholder="选择公里数"
                      clearable
                      @change="selecTime"
                    >
                      <el-option label="2000" value="2000"></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form>
              <div style="padding-bottom:20px">
                <!-- 卡片区域 -->
                <!-- @getName="suibian"  2.绑定子组件发送来的事件 cardDatam-->
                <div class="cards">
                  <AchivementCard
                    class="card-item"
                    :cards="item"
                    v-for="(item, index) in cardData"
                    :key="index"
                  />
                  <!-- @getName="suibian" -->
                </div>
              </div>
            </div>
          </el-card>
          <!-- 最佳拍档合作次数 -->
          <el-card class="stauts">
            <div class="laster">
              <el-row class="basic">
                <el-col :span="24">
                  <span class="traing"></span>最佳拍档(合作次数)
                  <span class="traing"></span>
                </el-col>
              </el-row>
              <el-table v-loading="loading" :data="typeList" class="tableColumn">
                <el-table-column label="运动员" align="center" prop="name" />
                <el-table-column
                  label="2X"
                  align="center"
                  prop="M2X"
                  :show-overflow-tooltip="true"
                />
                <el-table-column label="2-" align="center" prop="counts"></el-table-column>
                <el-table-column label="4X" align="center" prop="name"></el-table-column>
                <el-table-column label="4-" align="center" prop="M4X"></el-table-column>
                <el-table-column label="8+" align="center" prop="M8"></el-table-column>
                <el-table-column label="mix4x" align="center" prop=""></el-table-column>
                <el-table-column label="mix8+" align="center" prop="LM2X" width="180"></el-table-column>
              </el-table>
            </div>
          </el-card>
          <!-- 当前训练情况 -->
          <el-card class="stauts">
            <div class="laster">
              <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-row>
                  <el-col :span="10" style="text-align: left;">
                    <span class="traing"></span>完成周训练情况对比
                    <span class="traing"></span>
                  </el-col>
                  <el-col :span="4" class="water">
                    <el-form-item label=" " prop="boatType">
                      <el-select
                        v-model="form.trainingProject"
                        placeholder="选择专项"
                        clearable
                        size="small"
                        style="width: 160px"
                        @change="handerChangeWeek"
                      >
                        <el-option
                          v-for="dict in statusOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4" class="water">
                    <el-cascader
                      :options="options"
                      ref="first"
                      @change="handerChangeWeek"
                      clearable
                      v-model="opValue"
                      :show-all-levels="false"
                    ></el-cascader>
                  </el-col>
                  <el-col :span="4">
                    <el-cascader
                      :options="options"
                      ref="second"
                      @change="handerChangeWeek"
                      clearable
                      v-model="opValue1"
                      :show-all-levels="false"
                    ></el-cascader>                   
                  </el-col>
                </el-row>
              </el-form>
              <div class="LasterTraing">
                <span
                  class="prev"
                  @click="clickBadge(0, 'traning')"
                  :class="{'active':ys1}"
                >周与周训练量对比</span>
                <span class="next" @click="clickBadge(1)" :class="{'active': !ys1}">周与周训练时间对比</span>
              </div>
              <div class="weekTime">
                {{weekName1}}
                &nbsp;&nbsp;
                &nbsp;&nbsp;{{ weekName2}}
              </div>
              <div id="pic9"></div>
              <div class="LasterTraing">
               <span
                  class="prev"
                  @click="clickBadges(2)"
                  :class="{'active':ys2}"
                >水上专项提升与下降数据分析</span>
                <span class="next" @click="clickBadges(3)" :class="{'active': !ys2}">测功仪提升与下降数据分析</span>
              </div>
              <el-col :span="24" class="waterright">
                <el-select v-model="form.status" placeholder="水上专项训练">
                  <el-option label="1X" value="6"></el-option>
                  <el-option label="2x" value="traing"></el-option>
                  <el-option label="2-" value="leave"></el-option>
                  <el-option label="4x" value="1"></el-option>
                  <el-option label="4-" value="2"></el-option>
                  <el-option label="8+" value="3"></el-option>
                  <el-option label="mix4x" value="4"></el-option>
                  <el-option label="mix8+" value="5"></el-option>
                </el-select>
              </el-col>
              <div class="weekTime">取上周最好成绩与选定周最好成绩对比</div>
              <div id="pic8"></div>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="艇支"><Straing :activeName="activeName" /></el-tab-pane>
        <el-tab-pane label="身体素质"><health/></el-tab-pane>
        <el-tab-pane label="身体机能"><Bodyfunction :activeName="activeName" /></el-tab-pane>
        <el-tab-pane label="伤病" name="injury">
          <el-card class="stauts">
            <div class="bod-title">
              <div>
                <span class="traing"></span>受伤部位统计
                <span class="traing"></span>
              </div>
            </div>
            <div class="radar-box">
              <div class="radr-main">
                <div class="chart-title">受伤次数</div>
                <div id="injury"></div>
              </div>
              <div class="radr-main">
                <div class="chart-title">修复时间</div>
                <div id="injury-time"></div>
              </div>
            </div>
          </el-card>
          <el-card class="stauts">
            <div class="bod-title">
              <div>
                <span class="traing"></span>
                受伤史
                <span class="traing"></span>
              </div>
              <div>
                <el-date-picker
                  v-model="injuryTimer"
                  type="daterange"
                  @change="getInjuryList"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                ></el-date-picker>
              </div>
            </div>
            <el-table :data="injuryTableData" style="width: 100%">
              <el-table-column type="index" label="序号"></el-table-column>
              <el-table-column prop="reason" label="伤病部位"></el-table-column>
              <el-table-column prop="startTime" label="受伤时间"></el-table-column>
              <el-table-column prop="injuryCount" label="伤病复发次数"></el-table-column>
              <el-table-column prop="nowStatus" label="当前状态"></el-table-column>
              <el-table-column prop="cureTime" label="归队时间"></el-table-column>
              <el-table-column  label="查看详情"><el-button type="primary" size="small" v-if="injuryTableData.length!==0" @click="injurylook">查看</el-button></el-table-column>
            </el-table>
          </el-card>
          <el-card class="stauts">
            <div class="bod-title">
              <div>
                <span class="traing"></span>
                生病史
                <span class="traing"></span>
              </div>
              <div>
                <el-date-picker
                  v-model="illnessTimer"
                  type="daterange"
                  @change="getIllnessList"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                ></el-date-picker>
              </div>
            </div>
            <el-table :data="illnessTableData" style="width: 100%">
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column prop="diagnosis" label="病因"></el-table-column>
              <el-table-column prop="ctime" label="生病时间"></el-table-column>
              <el-table-column prop="nowStatus" label="当前状态"></el-table-column>
              <el-table-column prop="cureTime" label="归队时间"></el-table-column>
            </el-table>
          </el-card>
          <el-card class="stauts">
            <div class="bod-title">
              <div>
                <span class="traing"></span>过敏史
                <span class="traing"></span>
              </div>
              <div>
                <el-date-picker
                  v-model="allergyTimer"
                  type="daterange"
                  @change="getAllergyList"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                ></el-date-picker>
              </div>
            </div>
            <el-table :data="allergyTableData" style="width: 100%">
              <el-table-column type="index" label="序号"></el-table-column>
              <el-table-column prop="diagnosis" label="病因"></el-table-column>
              <el-table-column prop="ctime" label="生病时间"></el-table-column>
              <el-table-column prop="nowStatus" label="当前状态"></el-table-column>
              <el-table-column prop="cureTime" label="归队时间"></el-table-column>
            </el-table>
          </el-card>
        </el-tab-pane>       
        <el-tab-pane label="比赛">
          <el-row>
            <el-col :span="12">
              <el-button type="primary" class="newill addstatus">
                <i class="el-icon-plus"></i>
                <span>新增赛事</span>
              </el-button>
            </el-col>
          </el-row>
          <el-card v-for="(item, index) in getlist" :key="index" class="card-eat">
            <div class="compatibile-box">
              <div class="compatibile-left">
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               
                <el-button type="primary" class="newill droadload">
                  <i class="el-icon-upload2"></i>
                  <span>上传荣誉证书</span>
                </el-button>
                 </el-upload>
              </div>
              <div class="compatibile-right" >
                <div>
                  <el-col :span="3" class="match">
                    <div>赛事名称</div>
                    <div>时间</div>
                    <div>地点</div>
                    <div>参赛项目</div>
                    <div>成绩</div>
                    <div>赛程简介</div>
                  </el-col>
                  <el-col :span="11" class="match matchtime">
                    <div>{{item.matchName}}</div>
                    <div>{{item.matchTime}}</div>
                    <div>{{item.venue}}</div>
                    <div>{{item.event}}</div>
                    <div>{{item.achievement}}</div>
                    <div>{{item.memo}}</div>
                  </el-col>
                  <el-col :span="10" class="buttonright">
                    <el-button type="primary" class="button1" @click="submitForm('add')">保存</el-button>
                    <el-button type="primary" class="button2" @click="submitForm('edit',index)">删除</el-button>
                  </el-col>
                </div>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import Popup from "@/views/dashboard/elDialog/Popup";
// import AchivementCard from "@/views/components/AchivementCard";
import AchivementCard from "../../components/AchivementCard";
import Straing from "../../components/Straing";
import health from "../../components/health";
import Bodyfunction from "../../components/Bodyfunction";
import {
  bestwater,
  Partner,
  cooperation,
  weekTrainingCompletio,
  weekDate,
  injuryList,
  injuryHoursCount,
  injuryCount,
  allergyList,
  illnessList,race,matchList
} from "@/api/monitor/logininfor";
export default {
  components: { Popup, AchivementCard, Straing, health,Bodyfunction },
  data() {
    return {
      matchList:'',
      activeName: "",
      opValue: [],
      opValue1: [],
      options: [],
      getlist: [],
      imageUrl: "",
      ys1: true,
      ys2: true,
      value2: "",
      // 下拉框的数据词典
      queryParams: {},
      statusOptions: [],
      statusIlls: [],
      statusOptions1: [],
      // 遮罩层
      loading: true,
      typeList: [],
      curIndex: 0,
      // 表单
      value1: [{}],
      kilometers:2000,
      // 赛事成绩
      form: {
        trainingProject: "",
        typeBoatSupport: "",
        kilometers: "",
        status: "",
      },
      formlist: {
        typeBoatSupport: "",
        kilometers: "2000",
      },
      formlistData: {},
      cardData: [
        {
          model: "M2X",
          distance: "（2000米）",
          num: "(6: 31, 12)",
          color: "#019CFF",
          children: [{ rank: 1, name: "张三" }],
        },
        {
          model: "M2X",
          distance: "（2000米）",
          num: "(6: 31, 12)",
          color: "#42DEBB",
          children: [
            { rank: 1, name: "张三" },
            { rank: 1, name: "张三" },
            { rank: 2, name: "张三" },
            { rank: 3, name: "张三" },
          ],
        },
        {
          model: "M2X666",
          distance: "（2600米）",
          num: "(6: 31, 12)",
          color: "#F4A522",
          children: [
            { rank: 1, name: "张三" },
            { rank: 1, name: "张三" },
            { rank: 2, name: "张三" },
            { rank: 3, name: "张三" },
          ],
        },
        {
          model: "M2X77",
          distance: "（2900米）",
          num: "(6: 31, 12)",
          color: "#7DD220",
          children: [
            { rank: 1, name: "张三" },
            { rank: 2, name: "张三" },
            { rank: 3, name: "张三" },
          ],
        },
      ],
      weekArr: [],
      week1: [0, 0, 0, 0, 0, 0, 0],
      week2: [0, 0, 0, 0, 0, 0, 0],
      weekName1: "",
      weekName2: "",
      injuryTimeArr: [],
      injurytTimeName: [],
      injuryHoursArr: [],
      injuryHoursName: [],
      injuryTableData: [], // 受伤史
      injuryTimer: "", // 受伤的时间下拉框
      illnessTableData: [], // 生病史
      illnessTimer: "", // 生病的时间下拉框
      allergyTableData: [], //过敏史
      allergyTimer: "", // 过敏史的时间下拉框
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getEcharts([], [], ["1次", "2次", "3次", "4次"]);
    });
    this.TrainTarget("pic9");
    this.TrainTarget("pic8");
  },
  created() {
    this.GetListing("first_level").then((res) => {
      this.statusOptions = res.data;
    });
    this.GetListing("type_boat_support").then((res) => {
      this.statusIlls = res.data;
    });
    this.GetListing("screening_scope").then((res) => {
      this.statusOptions1 = res.data;
    });
    // 周训练中周的下拉框
    weekDate()
      .then((res) => {
    
        let arr = [];
        for (let i = 0; i < res.data.length; i++) {
          let arr1 = [];
          for (let j = 0; j < res.data[i].annualPlans.length; j++) {
            let arr2 = [];
            for (
              let k = 0;
              k < res.data[i].annualPlans[j].weekRets.length;
              k++
            ) {
              arr2.push({
                value: res.data[i].annualPlans[j].weekRets[k].index,
                label: `${res.data[i].annualPlans[j].weekRets[k].startTime}-${res.data[i].annualPlans[j].weekRets[k].endTime}`,
              });
            }
            arr1.push({
              value: res.data[i].annualPlans[j].id,
              label: res.data[i].annualPlans[j].cycleName,
              children: arr2,
            });
          }
          arr.push({
            value: res.data[i].id,
            label: res.data[i].name,
            children: arr1,
          });
          this.options = [...arr];
        }
      })
      .catch((err) => {});
    var test = this.$route.query.id;
    // 最佳拍档(合作次数)
    cooperation({
      sportsManId: test,
    })
      .then((res) => {  
        console.log(res,3334444);  
        if (res.code == 200) {
          let arr = [];
          for (let i = 0; i < res.data.length; i++) {
            arr.push({
              label: res.data[i].boatType,
              prop: res.data[i].boatType,
            });
          }
          this.handlerDatas(res.data);
        }
        this.loading = false;
      })
      .catch((err) => {});
    this.gatetime();
    this.selecTime();
    this.getInjuryList();
    this.getAllergyList();
    this.getIllnessList();
    this.racelist(); 
  },
  methods: {
    // 运动员比赛
    racelist(){
       race({sportsManId: this.$route.query.id}).then((res) => {             
        if (res.code == 200) {         
         this.getlist=res.rows; 
          
      }
      })
      .catch((err) => {});
    },
  
    // 受伤史
    getInjuryList() {
      let params = {
        sportsManId: this.$route.query.id,
        // type: 'training_status_6',
        startTime: "",
        endTime: "",
      };
      if (this.injuryTimer) {
        params.startTime = this.injuryTimer[0];
        params.endTime = this.injuryTimer[1];
      }else{
        params.startTime = new Date("2020-09-10 ");
        params.endTime = new Date("2020-09-29");
      }
      injuryList(params)
        .then((res) => {
          if (res.code == 200) {                         
            this.injuryTableData = res.data;                            
          }
        })
        .catch((err) => {});
    },
   injurylook(){
      this.$router.push({
        path: "/gen/lookbody",            
      }); 
   },
    getIllnessList() {
      let params = {
        sportsManId: this.$route.query.id,
        startTime: "",
        endTime: "",
      };
      if (this.illnessTimer) {
        params.startTime = this.illnessTimer[0];
        params.endTime = this.illnessTimer[1];
      }
      illnessList(params)
        .then((res) => {
          
          if (res.code == 200) {
            this.illnessTableData = res.data;
          }
        })
        .catch((err) => {});
    },
    // 过敏史
    getAllergyList() {
      let params = {
        sportsManId: this.$route.query.id,
        startTime: "",
        endTime: "",
      };
      // startTime: '2020-09-02 04:14:33',
      // endTime: '2020-09-25 04:14:33',
      if (this.allergyTimer) {
        params.startTime = this.allergyTimer[0];
        params.endTime = this.allergyTimer[1];
      }
      allergyList(params)
        .then((res) => {
          
          if (res.code == 200) {
            this.allergyTableData = res.data;
          }
        })
        .catch((err) => {});
    },
    injuryNumber() {
      let params = {
        sportsManId: this.$route.query.id,
      };
      injuryCount(params)
        .then((res) => {
          
          if (res.code == 200) {
            let arr = [];
            let arr1 = [];
            for (let i = 0; i < res.data.length; i++) {
              arr.push(res.data[i].count);
              arr1.push({
                name: res.data[i].reason,
              });
            }
            this.injuryTimeArr = [
              {
                value: [...arr],
              },
            ];
            this.radarChart("injury", this.injuryTimeArr, arr1);
          }
        })
        .catch((err) => {});
    },
    // 受伤部位修复时间
    injuryHours() {
      let params = {
        sportsManId: this.$route.query.id,
        // type: 1*1,
        reason: "",
      };
      injuryHoursCount(params)
        .then((res) => {
          

          if (res.code == 200) {
            let arr = [];
            let arr1 = [];
            for (let i = 0; i < res.data.length; i++) {
              arr.push(res.data[i].count);
              arr1.push({
                name: res.data[i].reason,
              });
            }

            this.injuryHoursArr = [
              {
                value: [...arr],
              },
            ];
            
            this.radarChart("injury-time", this.injuryHoursArr, arr1);
          }
        })
        .catch((err) => {});
    },
    handerChangeTab(val) {
      
      if (val.name == "injury") {
        this.$nextTick(() => {
          this.radarChart("injury", [], []);
          this.radarChart("injury-time", [], []);
          this.injuryNumber();
          this.injuryHours();
        });
      }
    },
    radarChart(element, data, name) {
     
      let myChart = this.$echarts.init(document.getElementById(element));
     
      var option = {
        tooltip: {},
        legend: {},
        radar: {
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5],
            },
          },
          indicator: [...name],
        },
        series: [
          {
            name: "受伤",
            type: "radar",
            // areaStyle: {normal: {}},
            data: [...data],
          },
        ],
      };
      myChart.setOption(option);
    },
    handerChangeWeek() {
      if (this.opValue.length != 0 && this.opValue1.length != 0) {
        this.weekName1 = this.$refs.first.getCheckedNodes()[0].label;
        this.weekName2 = this.$refs.second.getCheckedNodes()[0].label;
        let params = {
          sportsmanId: this.$route.query.id,
          trainingProject: this.form.trainingProject,
          weekId: this.opValue[2],
        };
        let params2 = {
          sportsmanId: this.$route.query.id,
          trainingProject: this.form.trainingProject,
          weekId: this.opValue1[2],
        };
        Promise.all([
          weekTrainingCompletio(params),
          weekTrainingCompletio(params2),
        ]).then((res) => {

          let arr = [];
          let arr1 = [];
          if (res[0].code == 200) {
            for (let i = 0; i < res[0].data.length; i++) {
              if (this.ys1) {
                // 为力量
                arr.push(res[0].data[i].kilometers);
              } else {
                // 时间对比
                arr.push(res[0].data[i].classHour);
              }
            }
          }
          if (res[1].code == 200) {
            for (let i = 0; i < res[1].data.length; i++) {
              if (this.ys1) {
                // 为力量
                arr1.push(res[1].data[i].kilometers);
              } else {
                // 时间对比
                arr1.push(res[1].data[i].classHour);
              }
            }
          }
          if (arr1.length == 0) {
            arr1 = [0, 0, 0, 0, 0, 0, 0];
          }
          if (arr.length == 0) {
            arr = [0, 0, 0, 0, 0, 0, 0];
          }
          this.week1 = [...arr];
         
          this.week2 = [...arr1];
          this.TrainTarget("pic9");
        });
      }
    },
    handlerDatas(arr) {
      const s = new Set(); //实例化对象
      arr.forEach((item) => s.add(item.sportsManId)); //添加值（Set可以去掉重复数据）
      let newData = Array.from({ length: s.size }, () => []); //创建指定长度数组并添值
      arr.forEach((item) => {
        let index = [...s].indexOf(item.sportsManId); //找到指定下标
        newData[index].push(item); //添加数据
      });
      let arr56 = []; // 两个以上的长度
      let arr78 = []; // 数组长度为1的
      for (let i = 0; i < newData.length; i++) {
        if (newData[i].length > 1) {
          let arr2 = [];
          for (let j = 0; j < newData[i].length; j++) {          
            if (newData[i][j].boatType == "M2X") {
              arr2.push({
                name: newData[i][j].name,
                M2X: newData[i][j].counts,
              });
            }
            if (newData[i][j].boatType == "M2-") {
              arr2.push({
                name: newData[i][j].name,
                m2_: newData[i][j].counts,
              });
            }

            if (newData[i][j].boatType == "M4X") {
              arr2.push({
                name: newData[i][j].name,
                M4X: newData[i][j].counts,
              });
            }

            if (newData[i][j].boatType == "LM2X") {
              arr2.push({
                name: newData[i][j].name,
                LM2X: newData[i][j].counts,
              });
            }

            if (newData[i][j].boatType == "M8+") {
              arr2.push({
                name: newData[i][j].name,
                M8: newData[i][j].counts,
              });
            }
          }
          let obj = {};
          for (let k = 0; k < arr2.length; k++) {
            obj = { ...obj, ...arr2[k] };
          }
          arr56.push(obj);
        } else {
          let arr2 = [];
          for (let j = 0; j < newData[i].length; j++) {
            
            if (newData[i][j].boatType == "M2X") {
              arr2.push({
                name: newData[i][j].name,
                M2X: newData[i][j].counts,
              });
            }

            if (newData[i][j].boatType == "M2-") {
              arr2.push({
                name: newData[i][j].name,
                m2_: newData[i][j].counts,
              });
            }

            if (newData[i][j].boatType == "M4X") {
              arr2.push({
                name: newData[i][j].name,
                M4X: newData[i][j].counts,
              });
            }

            if (newData[i][j].boatType == "LM2X") {
              arr2.push({
                name: newData[i][j].name,
                LM2X: newData[i][j].counts,
              });
            }

            if (newData[i][j].boatType == "M8+") {
              arr2.push({
                name: newData[i][j].name,
                M8: newData[i][j].counts,
              });
            }
          }
          let obj = {};
          for (let k = 0; k < arr2.length; k++) {
            obj = { ...obj, ...arr2[k] };
          }

          arr78.push(obj);
        }
      } 
      this.typeList = arr56.concat(arr78);
      console.log(this.typeList,7577777777)
    },
    clickBadge(num, type) {
      if (num == 0) {
        
        this.ys1 = true;
      } else if (num == 1) {
        this.ys1 = false;
      }
      this.handerChangeWeek();
    },
    clickBadges(num) {
      if (num == 2) {      
        this.ys2 = true;
      } else if (num == 3) {
        this.ys2 = false;
      }
    },
    gatetime() {
      var test = this.$route.query.id;
      var startTime = this.value1[0];
      var endtimes = this.value1[1];

      bestwater({
        // startTime: startTime,
        // endtimes: endtimes,
        sportsManId: test,
        // typeBoatSupport: this.form.typeBoatSupport,
        // trainingProject: this.form.trainingProject,
        // kilometers: this.form.kilometers,       
        // kilometers: 2000
      })
        .then((res) => {
          if (res.code == 200) {
            let arr = [...res.data];
           
            const s = new Set(); //实例化对象
            arr.forEach((item) => s.add(item.boatType)); //添加值（Set可以去掉重复数据）
            let newData = Array.from({ length: s.size }, () => []); //创建指定长度数组并添值
            arr.forEach((item) => {
              let index = [...s].indexOf(item.boatType); //找到指定下标
              newData[index].push(item); //添加数据
            });
            // 上面是为了把两个boatype一样的 放到一个数组中
            let opArr = [];
            let nameArr = [];
            for (let j = 0; j < newData.length; j++) {
              let dataArr = [];
              let name = "";

              for (let k = 0; k < newData[j].length; k++) {
                dataArr.push(newData[j][k].achievement);
                name = newData[j][k].boatType;
                // nameArr.push(newData[j][k].boatType)
              }
              opArr.push({
                name: name,
                type: "line",
                stack: name,
                data: dataArr,
              });
            }
            //  为了获取数组中最长的  作为X轴
            let xlength = [];
            var arr3 = [];
            for (let j = 0; j < opArr.length; j++) {
              arr3.push(opArr[j].data);
            }
            let lengs = 0;
            for (let i = 0; i < arr3.length; i++) {
              if (arr3[i].length > lengs) {
                lengs = arr3[i].length;
              }
            }
            //  给X轴赋值
            for (let j = 0; j < lengs; j++) {
              xlength.push(`${j + 1}次`);
            }
            if (lengs == 0) {
              xlength = ["1次", "2次", "3次", "4次"];
            }
            // 给折线图的legend的data赋值
            for (let m = 0; m < opArr.length; m++) {
              nameArr.push(opArr[m].name);
            }
            this.getEcharts(opArr, nameArr, xlength);
          }
        })
        .catch((res) => {});
    },
    selecTime() {
      var test = this.$route.query.id;
      
      Partner({
        sportsManId: test,
        kilometers: this.formlist.kilometers,
        typeBoatSupport: this.formlist.typeBoatSupport,
        // kilometers: 2000
      }).then((res) => {
        if (res.code == 200) {
          let arr = [];
          for (let i = 0; i < res.data.length; i++) {
            let childrenArr = [];
            for (let k = 0; k < res.data[i].sportsMans.length; k++) {
              childrenArr.push({
                rank: k,
                name: res.data[i].sportsMans[k].name,
              });
            }
            arr.push({
              model: res.data[i].boatType,
              // distance: "（2000米）", 如果要 就要问后端 怎么算
              // num: "(6: 31, 12)",如果要 就要问后端 怎么算
              color: "#019CFF",
              children: childrenArr,
            });
          }
         
          this.cardData = [...arr];
          // data.data
        }
        
      });
    },
    // 折线图
    getEcharts(data, name, xlength) {
     
      let myChart = this.$echarts.init(
        document.getElementById("water-speciale-chart")
      );
      myChart.clear();
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: name,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xlength,
        },
        yAxis: {
          type: "value",
        },
        series: data,
      });
    },
    // 完成周训练情况对比柱状图
    TrainTarget(element) {
      var myChart = this.$echarts.init(document.getElementById(element));
      myChart.setOption({
        title: {
          // text: '资源总览',
          left: "20px",
          textStyle: {
            color: "#436EEE",
            fontSize: 17,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
        },
        legend: {
          // orient: "vertical",
          // bottom: "bottom",
          data: ['选定周', '上周'],
        },
        series: [
          {
            name: "选定周",
            type: "bar",
            stack: "使用情况",
            data: this.week1,
            itemStyle: {
              normal: { color: "#FF8849" },
            },
          },
          {
            name: "上周",
            type: "bar",
            stack: "使用情况",
            data: this.week2,
            itemStyle: {
              normal: { color: "#3FBB49" },
            },
          },
        ],
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 运动员比赛删除和提交
    submitForm(value, index){
        this.matchList=this.getlist[index].id
       matchList({
         id:this.matchList
       }).then((res)=>{
        if(res.code==200){
           this.getlist.splice(index, 1); 
        }

       }).catch((res)=>{

       })
    }
  },
};
</script>
<style scoped>
.traing {
  display: inline-block;
  width: 14px;
  height: 8px;
  background-color: #2583ff;
  margin-right: 7px;
  margin-left: 7px;
}
.basic {
  margin-bottom: 40px;
  text-align: left;
}
.stauts {
  margin-top: 20px;
}
.cards {
  display: flex;
}
.card-item {
  width: 250px;
  height: 350px;
  margin-right: 20px;
}
.card-item:last-child {
  margin-right: 0;
}

#pic9,
#pic8 {
  width: 1150px;
  height: 400px;
  margin: 20px auto;
}

.LasterTraing {
  text-align: center;
  margin-top: 66px;
  position: relative;
}
/* .prev {
  display: inline-block;
  width: 184px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #ff1d2b;
  color: #ffff;
  border-radius: 50px;
} */
.next {
  display: inline-block;
  width: 184px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #ffedee;
  color: #ff1d2b;
  border-radius: 50px;
  margin-left: -29px;
  cursor: pointer;
}
.prev {
  display: inline-block;
  width: 184px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #ffedee;
  color: #ff1d2b;
  border-radius: 50px;
  cursor: pointer;
}
.weekTime {
  text-align: center;
  color: #666666;
  padding-top: 20px;
}
.water {
  text-align: right;
  margin-left: 40px;
}
.waterright {
  text-align: right;
  padding: 20px;
}
.active {
  background-color: #ff1d2b;
  color: #fff;
}
.status-1{
  font-size: 14px;
}
.status-1 .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 259px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9;
}
.droadload {
  margin-top: 20px;
  margin-left: 8px;
}
.addstatus {
  margin: 20px;
  text-align: left;
}
.match {
  color: #777777;
  font-size: 14px;
}
.match div:nth-child(n + 2) {
  margin-top: 20px;
}
.matchtime div {
  color: #222222;
}
.buttonright {
  text-align: right;
}
.button1 {
  background-color: #ffffff;
  color: #3296fa;
  border: 1px solid #3296fa;
  border-radius: 18px;
  cursor: pointer;
}
.button2 {
  background-color: #ffffff;
  color: #ff1d2b;
  border: 1px solid #ff1d2b;
  border-radius: 18px;
  cursor: pointer;
}
.card-eat {
  margin-top: 20px;
}
.bod-title {
  display: flex;
  align-items: center;
  height: 30px;
  margin-bottom: 40px;
  justify-content: space-between;
}
.chart-title {
  margin-bottom: 15px;
}
.radar-box {
  display: flex;
}
.radr-main {
  width: 50%;
  text-align: center;
}
#injury-time,
#injury {
  height: 400px;
}
.compatibile-box {
  display: flex;
}
.compatibile-left {
  width: 250px;
}
.compatibile-right {
  flex: 1;
}
</style>